<template>
  <div class="join-contact-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>加入我们 & 联系我们</h1>
        <p>成为视界无界的一员，共同创造精彩内容</p>
      </div>
    </div>

    <!-- 介绍部分 -->
    <section class="intro-section">
      <div class="container">
        <div class="intro-content">
          <div class="intro-text">
            <h2>关于视界无界</h2>
            <p>视界无界是一个综合性的数字内容平台，致力于为用户提供丰富多彩的视频、音乐、动漫、游戏等数字内容。我们的使命是打破边界，连接全球优质数字内容，为用户带来沉浸式的数字体验。</p>
            <p>自2009年成立以来，我们不断创新技术，优化用户体验，已发展成为拥有数百万用户的优质内容社区。在这里，每个人都能找到属于自己的兴趣天地，发现无限可能。</p>
          </div>
          <div class="intro-image">
            <img src="https://placehold.co/600x400/00a1d6/FFFFFF?text=视界无界" alt="视界无界" class="feature-image">
          </div>
        </div>
      </div>
    </section>

    <!-- 加入制作组 -->
    <section class="join-section">
      <div class="container">
        <h2>加入制作组</h2>
        <p class="section-description">我们正在寻找志同道合的伙伴，一起创造数字世界的无限可能。无论你是技术达人、创意专家还是运营高手，在这里都能找到施展才华的舞台。</p>
        
        <div class="join-form-container">
          <form class="join-form" @submit.prevent="submitJoinForm">
            <div class="form-row">
              <div class="form-group">
                <label for="name">姓名</label>
                <input id="name" v-model="joinForm.name" type="text" placeholder="请输入您的姓名" required>
              </div>
              <div class="form-group">
                <label for="email">邮箱</label>
                <input id="email" v-model="joinForm.email" type="email" placeholder="请输入您的邮箱" required>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-group">
                <label for="phone">电话</label>
                <input id="phone" v-model="joinForm.phone" type="tel" placeholder="请输入您的电话">
              </div>
              <div class="form-group">
                <label for="position">意向职位</label>
                <select id="position" v-model="joinForm.position" required>
                  <option value="">请选择职位</option>
                  <option value="frontend">前端开发工程师</option>
                  <option value="backend">后端开发工程师</option>
                  <option value="designer">UI/UX设计师</option>
                  <option value="editor">内容编辑</option>
                  <option value="marketing">市场营销</option>
                  <option value="other">其他</option>
                </select>
              </div>
            </div>
            
            <div class="form-group">
              <label for="experience">工作经验</label>
              <select id="experience" v-model="joinForm.experience">
                <option value="">请选择经验年限</option>
                <option value="0">应届毕业生</option>
                <option value="1">1年以下</option>
                <option value="2-3">2-3年</option>
                <option value="3-5">3-5年</option>
                <option value="5+">5年以上</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="introduction">自我介绍</label>
              <textarea id="introduction" v-model="joinForm.introduction" rows="4" placeholder="请简要介绍您自己和相关技能" required></textarea>
            </div>
            
            <div class="form-group">
              <label for="portfolio">作品集链接（可选）</label>
              <input id="portfolio" v-model="joinForm.portfolio" type="url" placeholder="请输入您的作品集链接">
            </div>
            
            <button type="submit" class="btn-primary">提交申请</button>
          </form>
        </div>
        
        <!-- 招聘职位展示 -->
        <div class="job-showcase">
          <h3>热门职位</h3>
          <div class="job-list">
            <div class="job-item">
              <h4>前端开发工程师</h4>
              <p><strong>职责：</strong>负责平台Web前端开发，优化用户体验</p>
              <p><strong>要求：</strong>3年以上前端开发经验，精通Vue.js、React等框架</p>
            </div>
            <div class="job-item">
              <h4>内容运营专员</h4>
              <p><strong>职责：</strong>负责内容审核、推荐和社区运营</p>
              <p><strong>要求：</strong>1年以上内容运营经验，对数字内容行业有深入了解</p>
            </div>
            <div class="job-item">
              <h4>UI/UX设计师</h4>
              <p><strong>职责：</strong>负责产品界面设计和用户体验优化</p>
              <p><strong>要求：</strong>2年以上相关经验，具备良好的审美能力和用户思维</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系官方 -->
    <section class="contact-section">
      <div class="container">
        <h2>联系官方</h2>
        <p class="section-description">如有任何问题、建议或合作意向，欢迎通过以下方式联系我们</p>
        
        <div class="contact-content">
          <div class="contact-info">
            <div class="contact-item">
              <div class="contact-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <polyline points="9 22 9 12 15 12 15 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="contact-text">
                <h4>地址</h4>
                <p>北京市海淀区中关村科技园区8号楼</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="contact-text">
                <h4>电话</h4>
                <p>400-123-4567</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="contact-text">
                <h4>邮箱</h4>
                <p>contact@shijiewujie.com</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="contact-text">
                <h4>官方微博</h4>
                <p>@视界无界</p>
              </div>
            </div>
          </div>
          
          <!-- 联系表单 -->
          <div class="contact-form-container">
            <form class="contact-form" @submit.prevent="submitContactForm">
              <div class="form-row">
                <div class="form-group">
                  <label for="contact-name">姓名</label>
                  <input id="contact-name" v-model="contactForm.name" type="text" placeholder="请输入您的姓名" required>
                </div>
                <div class="form-group">
                  <label for="contact-email">邮箱</label>
                  <input id="contact-email" v-model="contactForm.email" type="email" placeholder="请输入您的邮箱" required>
                </div>
              </div>
              
              <div class="form-group">
                <label for="contact-subject">主题</label>
                <input id="contact-subject" v-model="contactForm.subject" type="text" placeholder="请输入联系主题" required>
              </div>
              
              <div class="form-group">
                <label for="contact-message">留言内容</label>
                <textarea id="contact-message" v-model="contactForm.message" rows="5" placeholder="请输入您的留言" required></textarea>
              </div>
              
              <button type="submit" class="btn-primary">提交留言</button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- 友情链接 -->
    <section class="links-section">
      <div class="container">
        <h2>友情链接</h2>
        <div class="links-grid">
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('动漫之家')">动漫之家</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('网易云音乐')">网易云音乐</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('腾讯视频')">腾讯视频</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('爱奇艺')">爱奇艺</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('B站')">B站</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('斗鱼直播')">斗鱼直播</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('虎牙直播')">虎牙直播</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('知乎')">知乎</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('微博')">微博</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('百度贴吧')">百度贴吧</a>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'JoinContactView',
  data() {
    return {
      // 加入制作组表单数据
      joinForm: {
        name: '',
        email: '',
        phone: '',
        position: '',
        experience: '',
        introduction: '',
        portfolio: '',
      },
      // 联系我们表单数据
      contactForm: {
        name: '',
        email: '',
        subject: '',
        message: '',
      },
    }
  },
  methods: {
    // 提交加入制作组表单
    submitJoinForm() {
      // 这里可以添加表单验证逻辑
      console.log('加入制作组表单提交:', this.joinForm)
      
      // 模拟表单提交成功
      alert('您的申请已成功提交！我们会尽快与您联系。')
      
      // 重置表单
      this.resetJoinForm()
    },
    
    // 提交联系我们表单
    submitContactForm() {
      // 这里可以添加表单验证逻辑
      console.log('联系我们表单提交:', this.contactForm)
      
      // 模拟表单提交成功
      alert('您的留言已成功提交！我们会尽快回复。')
      
      // 重置表单
      this.resetContactForm()
    },
    
    // 重置加入制作组表单
    resetJoinForm() {
      this.joinForm = {
        name: '',
        email: '',
        phone: '',
        position: '',
        experience: '',
        introduction: '',
        portfolio: '',
      }
    },
    
    // 重置联系我们表单
    resetContactForm() {
      this.contactForm = {
        name: '',
        email: '',
        subject: '',
        message: '',
      }
    },
    
    // 显示链接即将上线提示
    showLinkComingSoon(linkName) {
      alert(`${linkName} 链接即将上线，敬请期待！`)
    },
  },
}
</script>

<style scoped>
.join-contact-page {
  min-height: 100vh;
  background-color: var(--background-primary, #ffffff);
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, var(--primary-color, #00a1d6) 0%, var(--secondary-color, #667eea) 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.page-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 介绍部分 */
.intro-section {
  padding: 80px 0;
  background-color: var(--background-light, #f8f9fa);
}

.intro-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--text-primary, #333);
}

.intro-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary, #666);
  margin-bottom: 20px;
}

.intro-image {
  flex: 1;
}

.feature-image {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-image:hover {
  transform: scale(1.02);
}

/* 加入制作组部分 */
.join-section {
  padding: 80px 0;
  background-color: var(--background-primary, #ffffff);
}

.join-section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.section-description {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-secondary, #666);
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.join-form-container {
  background-color: var(--background-light, #f8f9fa);
  padding: 40px;
  border-radius: 8px;
  margin-bottom: 60px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.join-form {
  max-width: 800px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary, #333);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-light, #ddd);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color, #00a1d6);
}

.btn-primary {
  background-color: var(--primary-color, #00a1d6);
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: var(--primary-hover, #0086b3);
}

/* 职位展示 */
.job-showcase h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary, #333);
}

.job-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.job-item {
  background-color: var(--background-light, #f8f9fa);
  padding: 25px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.job-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.job-item h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.job-item p {
  margin-bottom: 10px;
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 联系官方部分 */
.contact-section {
  padding: 80px 0;
  background-color: var(--background-light, #f8f9fa);
}

.contact-section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-icon {
  color: var(--primary-color, #00a1d6);
  flex-shrink: 0;
  margin-top: 3px;
}

.contact-text h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text-primary, #333);
}

.contact-text p {
  color: var(--text-secondary, #666);
  margin: 0;
}

.contact-form-container {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.contact-form {
  max-width: 100%;
}

/* 友情链接部分 */
.links-section {
  padding: 80px 0;
  background-color: var(--background-primary, #ffffff);
}

.links-section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-primary, #333);
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.link-item {
  display: block;
  text-align: center;
  padding: 15px;
  background-color: var(--background-light, #f8f9fa);
  color: var(--text-primary, #333);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.link-item:hover {
  background-color: var(--primary-color, #00a1d6);
  color: white;
  transform: translateY(-3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .intro-content {
    flex-direction: column;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
  }
  
  .job-list {
    grid-template-columns: 1fr;
  }
  
  .links-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  
  .join-form-container,
  .contact-form-container {
    padding: 25px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 60px 0;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  .section-description {
    font-size: 1rem;
  }
  
  .intro-section,
  .join-section,
  .contact-section,
  .links-section {
    padding: 60px 0;
  }
  
  .contact-item {
    flex-direction: column;
    text-align: center;
  }
  
  .contact-icon {
    margin-bottom: 10px;
    margin-top: 0;
  }
}
</style>